<template>
  <div id="dialogAddEdit">
    <el-dialog
      class="about-set"
      :title="showTitle"
      :visible.sync="dialogData.isShow"
      width="580px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="公告标题" prop="postName">
            <el-input v-model="ruleForm.postName"></el-input>
          </el-form-item>
          <el-form-item label="公告类型" prop="configName">
            <el-select v-model="ruleForm.checkContext" placeholder="所有">
              <el-option
                v-for="item in statusList"
                :key="item.key"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公告标题" prop="postName">
            <div id="father" style="width:450px">
              <wangeditor :catch-data="catchData" />
            </div>
          </el-form-item>
          <el-form-item label="公告标题" prop="postName">
            <el-radio-group v-model="ruleForm.status">
              <el-radio
                v-for="item in orderList"
                :key="item.key"
                :label="item.key"
                :value="item.value"
              >
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
        >确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from '@component/system/notice/wangeditor'
export default {
  name: 'dialogAddEdit',
  msg: '岗位管理-新增/编辑弹窗',
  components: {
    wangeditor
  },
  props: ['dialogData'],
  data() {
    var valiPostSort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('显示顺序不能为空'))
      } else {
        if (isNaN(value)) {
          callback(new Error('显示顺序必须为数字值'))
        } else {
          callback()
        }
      }
    }
    return {
      isAdd: true, // 新增-true,编辑-false
      showTitle: '',
      loading: false,
      catchData: false,
      statusList: [
        // 用户状态
        { key: '全部', value: 0 },
        { key: '正常', value: 1 },
        { key: '停用', value: -1 }
      ],
      orderList: [
        // 用户状态
        { key: '全部', value: 0 },
        { key: '正常', value: 1 }
      ],
      postId: null, // 岗位编号
      ruleForm: {
        postName: '', // 岗位名称
        status: '0' // 岗位状态,默认正常
      },
      rules: {
        postName: [
          { required: true, message: '岗位名称不能为空', trigger: 'blur' }
          /* {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'} */
        ],
        postCode: [
          { required: true, message: '岗位编码不能为空', trigger: 'blur' }
          /* { max: 500, message: '最大长度500个字符', trigger: 'blur'} */
        ],
        postSort: { validator: valiPostSort, trigger: 'blur' },
        remark: {
          /* required: true, message: '请选择归属部门', trigger: 'change' */
        }
      }
    }
  },
  mounted() {
    this.isAdd = this.dialogData.type === 'add'
    this.showTitle = this.isAdd ? '新增' : '编辑'
    if (!this.isAdd) {
      // this.getFormData()
    }
  },
  methods: {
    /* 编辑时获取表单详情 */
    getFormData() {},
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.postId = null
      this.dialogData.postId = null
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
// #dialogAddEdit {
// }
</style>
